<template>
  <el-card>
    <div class="content">
      <span class="title">用户信息</span>
      <div class="item">
        <el-row>
          <el-col :span="5">订单交易号</el-col>
          <el-col :span="7">{{ orderInfo.outTradeNo }}</el-col>
          <el-col :span="5">医院名称</el-col>
          <el-col :span="7">{{ orderInfo.hosname }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">科室名称</el-col>
          <el-col :span="7">{{ orderInfo.depname }}</el-col>
          <el-col :span="5">医生职称</el-col>
          <el-col :span="7">{{ orderInfo.title }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">安排日期</el-col>
          <el-col :span="7">{{ orderInfo.reserveDate }}</el-col>
          <el-col :span="5">预约序号</el-col>
          <el-col :span="7">{{ orderInfo.reserveTime }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">医事服务费</el-col>
          <el-col :span="7">{{ orderInfo.amount }}</el-col>
          <el-col :span="5">建议取号时间</el-col>
          <el-col :span="7">{{ orderInfo.fetchTime }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">取号地点</el-col>
          <el-col :span="7">{{ orderInfo.fetchAddress }}</el-col>
          <el-col :span="5">退号时间</el-col>
          <el-col :span="7">{{ orderInfo.quitTime }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">订单状态</el-col>
          <el-col :span="7" v-if="orderInfo.param">{{ orderInfo.param.orderStatusString }}</el-col>
          <el-col :span="5">预约时间</el-col>
          <el-col :span="7">{{ orderInfo.updateTime }}</el-col>
        </el-row>
      </div>

      <span class="title">就诊人信息</span>
      <div class="item">
        <el-row>
          <el-col :span="5">姓名</el-col>
          <el-col :span="7">{{ patient.name }}</el-col>
          <el-col :span="5">证件类型</el-col>
          <el-col :span="7" v-if="patient.param">{{ patient.param.certificatesTypeString }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">证件编号</el-col>
          <el-col :span="7">{{ patient.certificatesNo }}</el-col>
          <el-col :span="5">性别</el-col>
          <el-col :span="7">{{ patient.sex == 1 ? "男" : "女" }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">出生年月</el-col>
          <el-col :span="7">{{ patient.birthdate }}</el-col>
          <el-col :span="5">手机</el-col>
          <el-col :span="7">{{ patient.contactsPhone }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">是否结婚</el-col>
          <el-col :span="7">{{ patient.certificatesNo }}</el-col>
          <el-col :span="5">地址</el-col>
          <el-col :span="7" v-if="patient.param">{{ patient.param.fullAddress }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">联系人姓名</el-col>
          <el-col :span="7">{{ patient.contactsName }}</el-col>
          <el-col :span="5">联系人证件类型</el-col>
          <el-col :span="7" v-if="patient.param">{{
            patient.param.contactsCertificatesTypeString
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">联系人证件号码</el-col>
          <el-col :span="7">{{ patient.contactsCertificatesNo }}</el-col>
          <el-col :span="5">联系人手机</el-col>
          <el-col :span="7">{{ patient.phone }}</el-col>
        </el-row>
      </div>
      <el-button @click="orderList">返回</el-button>
    </div>
  </el-card>
</template>

<script>
import { reqOrderDetails } from "@/api/order";
export default {
  data() {
    return {
      id: "",
      formTo: "",
      orderInfo: {},
      patient: {},
    };
  },

  methods: {
    // 点击返回按钮  返回到订单list 页面
    orderList() {
      this.$router.push("/order/list");
    },

    // 请求订单详情页面的数据
    async getOrderDetails() {
      try {
        const res = await reqOrderDetails(this.id);
        this.orderInfo = res.data.orderInfo;
        this.patient = res.data.patient;
        // console.log(this.orderInfo);
      } catch (e) {}
    },
  },
  mounted() {
    const { id, form } = this.$route.query;
    this.id = id;
    this.formTo = form;
    this.getOrderDetails();
  },
};
</script>

<style lang="scss" scoped>
.content {
  margin: 20px;
}
.title {
  // 给标题添加加粗样式
  font-weight: bold;
}
.item {
  margin: 20px 0;
}
.el-col {
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  border: 1px solid #c9c6c645;
}
.el-col-5 {
  background-color: #fafafa;
}
</style>
